<template>
  <div class="courses">
    <v-list class="class_list">
        <v-data-table
          :headers="head"
          :items="items"
          :items-per-page="10"
          class="elevation-1"
          @click:row="toContain"
        >
      </v-data-table>
    </v-list>
  </div>
</template>
<script>
export default {
  data: () => ({
    head: [
      { text: 'id', value: 'id' },
      { text: 'name', value: 'name' },
      { text: 'gender', value: 'gender' },
      { text: 'phone', value: 'phone' },
      { text: 'role', value: 'role' },
      { text: 'actions', value: 'actions' }
    ]
  }),
  mounted() {
  },
  methods: {
    
  },
};
</script>
<style scoped>
.courses {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.class_list{
background-color: #F5F5F5;
width: 100%;
padding-top: 8vh;
padding-left: 2vw;
padding-right: 2vw;
}
.classes{
  border: 1px solid #E0E0E0;
  padding-left: 2vw ;
  margin-right: 15vw;
}
</style>
